<template>
  <view class="category-item">
    <view class="category-icon-wrapper" :class="iconClass">
      <view :class="'icon-' + icon"></view>
    </view>
    <text class="category-name">{{ name }}</text>
  </view>
</template>

<script>
export default {
  name: 'AccountingCategory',
  props: {
    name: {
      type: String,
      required: true
    },
    icon: {
      type: String,
      required: true
    }
  },
  computed: {
    iconClass() {
      const classMap = {
        general: 'icon-general-bg',
        shopping: 'icon-shopping-bg',
        food: 'icon-food-bg',
        transport: 'icon-transport-bg',
        house: 'icon-house-bg',
        medical: 'icon-medical-bg'
      };
      return classMap[this.icon] || 'icon-general-bg';
    }
  }
}
</script>

<style>
.category-item {
  width: 33.33%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20rpx;
}

.category-icon-wrapper {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10rpx;
}

.icon-general-bg {
  background-color: #FF4D6A;
}

.icon-shopping-bg {
  background-color: #FFB74D;
}

.icon-food-bg {
  background-color: #FF7043;
}

.icon-transport-bg {
  background-color: #29B6F6;
}

.icon-house-bg {
  background-color: #66BB6A;
}

.icon-medical-bg {
  background-color: #EC407A;
}

.icon-general {
  width: 30rpx;
  height: 30rpx;
  border: 2rpx solid #FFFFFF;
  border-radius: 50%;
}

.icon-shopping {
  width: 30rpx;
  height: 30rpx;
  position: relative;
}

.icon-shopping:before {
  content: "";
  position: absolute;
  width: 30rpx;
  height: 20rpx;
  border: 2rpx solid #FFFFFF;
  border-radius: 2rpx;
  top: 5rpx;
  left: 0;
}

.icon-shopping:after {
  content: "";
  position: absolute;
  width: 2rpx;
  height: 10rpx;
  background-color: #FFFFFF;
  top: 0;
  left: 8rpx;
  box-shadow: 12rpx 0 0 0 #FFFFFF;
}

.icon-food {
  width: 30rpx;
  height: 30rpx;
  position: relative;
}

.icon-food:before {
  content: "";
  position: absolute;
  width: 2rpx;
  height: 25rpx;
  background-color: #FFFFFF;
  top: 2rpx;
  left: 8rpx;
}

.icon-food:after {
  content: "";
  position: absolute;
  width: 2rpx;
  height: 25rpx;
  background-color: #FFFFFF;
  top: 2rpx;
  right: 8rpx;
  transform: rotate(15deg);
}

.icon-transport {
  width: 30rpx;
  height: 15rpx;
  background-color: #FFFFFF;
  border-radius: 3rpx;
  position: relative;
}

.icon-transport:before {
  content: "";
  position: absolute;
  width: 6rpx;
  height: 6rpx;
  background-color: #29B6F6;
  border-radius: 50%;
  bottom: -10rpx;
  left: 4rpx;
  box-shadow: 16rpx 0 0 0 #29B6F6;
}

.icon-house {
  width: 30rpx;
  height: 20rpx;
  position: relative;
}

.icon-house:before {
  content: "";
  position: absolute;
  width: 30rpx;
  height: 15rpx;
  background-color: #FFFFFF;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  top: -10rpx;
  left: 0;
}

.icon-house:after {
  content: "";
  position: absolute;
  width: 20rpx;
  height: 15rpx;
  background-color: #FFFFFF;
  border-radius: 2rpx;
  bottom: 0;
  left: 5rpx;
}

.icon-medical {
  width: 20rpx;
  height: 20rpx;
  background-color: #FFFFFF;
  border-radius: 10rpx 10rpx 2rpx 2rpx;
  position: relative;
}

.icon-medical:before {
  content: "";
  position: absolute;
  width: 10rpx;
  height: 4rpx;
  background-color: #FFFFFF;
  border-radius: 2rpx;
  bottom: -8rpx;
  left: 5rpx;
}

.category-name {
  font-size: 26rpx;
  color: #666666;
}
</style>